<template>
    <div ref="MapView" style="height:100%">
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
        </div>
    </div>
</template>

<script>
import simpleMap from '../../components/simpleMap';
import gsap from "gsap";

var map = null;
var mapConfig = [{ "type": "TD", "name": "天地图", "layerType": "background", "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", "default": false }]
const randomNum = (min, max) => parseFloat(Math.random() * (max - min + 1) + min, 10);


import Material from './Material.js'

export default {
    data() { return { SenceMode: '3D', } },
    watch: { SenceMode(val) { map.SenceMode = val; } },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView, {
            mapOptions: {
                animation: false, // 关闭默认动画事件
                senceMode: this.SenceMode, // 初始化时，以2D模式进行渲染
            },
        });
        map.addProviders(mapConfig);
        map.flytochina();
        const viewer = map.getViewer();

        const scene = viewer.scene;


        const Collection = new Cesium.BillboardCollection();
        viewer.scene.primitives.add(Collection);
        const Mapping = {};

        var _array = [];
        for (let i = 0; i < 10; i++) {
            Mapping['P' + i] = Collection.add({
                id: 'P' + i,
                position: simpleMap.util.CreatePosition({
                    longitude: randomNum(80, 120),
                    latitude: randomNum(25, 45),
                    height: randomNum(0, 1000000),
                }),
                image: './image/plane.png',
                color: simpleMap.util.formarColor("#55bc8a"),
                width: 32,
                height: 32,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.CENTER,
            });
        }
        var lat = 42.006;
        var lon = 128.055;



        viewer.entities.add({
            name: 'PolylineTrail',
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArrayHeights([lon, lat, 2500, lon + 10, lat, 2500,]),
                width: 2,
                material: new Material({
                    color: Cesium.Color.WHITE,
                    duration: 3000,
                    trailImage: require('./Material.png'),
                })
            }
        });


        // var Geometry = new Cesium.PolylineGeometry({
        // 	positions: [Mapping['P0'].position, Mapping['P1'].position],
        // 	width: 2.0,
        // 	vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
        // 	colorsPerVertex: true,
        // 	colors: [
        // 		new Cesium.Color(0.1, 0.0, 0.0, 1.0),
        // 		new Cesium.Color(0.7, 0.0, 0.0, 1.0),
        // 		new Cesium.Color(1.0, 0.0, 0.0, 1.0)
        // 	],
        // })

        // console.log(Geometry);


        // setInterval(() => {
        // 	for (let i = 0; i < 10; i++) {
        // 		const position = simpleMap.util.CreatePosition({
        // 			longitude: randomNum(80, 120),
        // 			latitude: randomNum(25, 45),
        // 			height: randomNum(0, 1000000),
        // 		})
        // 		const oldPosition = { ...Mapping['P' + i].position };
        // 		gsap.to(oldPosition, {
        // 			x: position.x,
        // 			y: position.y,
        // 			z: position.z,
        // 			repeat: -1,
        // 			ease: "none",
        // 			onUpdate() {
        // 				Mapping['P' + i].position = new Cesium.Cartesian3(oldPosition.x, oldPosition.y, oldPosition.z);
        // 				// if (i == 0) {
        // 				// 	Geometry._positions[0] = new Cesium.Cartesian3(oldPosition.x, oldPosition.y, oldPosition.z);
        // 				// }
        // 				// if (i == 1) {
        // 				// 	Geometry._positions[1] = new Cesium.Cartesian3(oldPosition.x, oldPosition.y, oldPosition.z);
        // 				// }
        // 			},
        // 		});
        // 	}
        // }, 2000)

        // var geometry = Cesium.PolylineGeometry.createGeometry(polyline);


        // var primitive = new Cesium.Primitive({
        // 	geometryInstances: new Cesium.GeometryInstance({ geometry: Geometry }),
        // 	appearance: new Cesium.PolylineColorAppearance({
        // 		translucent: false,
        // 		fragmentShaderSource: `precision highp float;
        //         varying vec4 v_color;
        //         void main(){
        //             float r=v_color.r-u_itime_0*u_trailmovespeed_2;
        //             float dist=smoothstep(0.0,u_trailpercent_1,mod(r,u_trailpercent_1));
        //             gl_FragColor=mix(vec4(1.0,0.0,0.0,1.0),vec4(1.0),dist);
        //         }`,
        // 	}),
        // });
        // primitive.appearance.material = new Cesium.Material({
        // 	fabric: {
        // 		uniforms: {
        // 			u_itime: 10.0,
        // 			u_trailpercent: 0.3,
        // 			u_trailmovespeed: 5.0 / 50.0,
        // 		}
        // 	}
        // });

        // scene.primitives.add(primitive);

        // scene.preRender.addEventListener(function (s, t) {
        // 	let elaspTime = Cesium.JulianDate.now().secondsOfDay - t.secondsOfDay;
        // 	primitive.appearance.material.uniforms.u_itime = elaspTime;
        // });


    },
    methods: {
        rgba2Color(value) {
            const regex = /(?<=\().+?(?=\))/g;
            var _value = value.match(regex)[0].split(',');
            return new Cesium.Color(_value[0] / 255, _value[1] / 255, _value[2] / 255, _value[3]);
        },
    }
}
</script>

<style>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
    z-index: 4;
}
</style>